﻿@page "/scheduler/hierarchical-grouping"

@using Syncfusion.Blazor.Schedule

@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This demo illustrates the work progress under two different projects which are categorized as 'Development' and 'Testing',
        since both the projects comes across the two common stages.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this demo, there are two resource levels defined under the <code>Resources</code> property - one with the name <code>Projects</code> and other with the name <code>Categories</code> respectively. Also, both the names are defined in the <code>Group</code> property to allow two level hierarchical grouping. The order of grouping depends on the order of names passed onto
        the <code>Resources</code> option within <code>Group</code>. In this sample, we have used two level hierarchy, where the <code>PROJECT 1</code> and <code>PROJECT 2</code> are the parent level and the <code>Development</code> and <code>Testing</code> are child level resources which are defined using the <code>Resources</code> property. The requirement here is to categorize the sub-options that are common to both the projects and to enable
        such grouping. It is necessary to set the <code>ByGroupID</code> option within the <code>GroupID</code> which allows all the resources available in each child level to be grouped under its parent resources. With this option available, we can avoid the need to provide multiple definitions of the same data to be grouped under different parent.
    </p>
    <p>
        Also, the colors defined at the last level resources will get applied to the events of those resources by default. In case,
        if the colors of parent level needs to be applied to child events, then it is necessary to define the <code>resourceColorField</code> option within the <code>EventSettings</code> property with the parent level resource name value.
    </p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.ResourceTeamData" Width="100%" Height="650px" @bind-CurrentView="@CurrentView" @bind-SelectedDate="@CurrentDate" StartHour="09:00" EndHour="19:00">
            <ScheduleGroup ByGroupID="false" Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@Projects" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
                <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@Categories" Field="CategoryId" Title="Category" Name="Categories" TextField="Text" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
            </ScheduleResources>
            <ScheduleEventSettings DataSource="@DataSource">
                <ScheduleField>
                    <FieldSubject Name="Subject" Title="Summary"></FieldSubject>
                    <FieldDescription Name="Description" Title="Comments"></FieldDescription>
                </ScheduleField>
            </ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 7);
    private View CurrentView = View.WorkWeek;
    public List<ScheduleData.ResourceTeamData> DataSource = new ScheduleData().GetResourceTeamData();
    public string[] GroupData = new string[] { "Projects", "Categories" };
    private List<ResourceData> Projects { get; set; } = new List<ResourceData> {
        new ResourceData { Text = "PROJECT 1", Id = 1, Color = "#cb6bb2" },
        new ResourceData { Text = "PROJECT 2", Id = 2, Color = "#56ca85" }
    };
    private List<ResourceData> Categories { get; set; } = new List<ResourceData>
    {
        new ResourceData { Text = "Development", Id = 1, Color = "#df5286" },
        new ResourceData { Text = "Testing", Id = 2, Color = "#7fa900" }
    };
    public class ResourceData
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public string Color { get; set; }
    }
}

<style type="text/css">
    .e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {
        width: 90px;
    }

    .e-schedule .e-agenda-view .e-resource-column {
        width: 100px;
    }
</style>
